SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>JSX (JavaScript)</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading">JSX (JavaScript)</h1>

</header>

</div>

<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="fr" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="fr" dir="ltr">JSX (JavaScript Syntax Extension et parfois appelé JavaScript <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a>) est une <a href="React" title="React">extension React</a> de la syntaxe du langage <a href="JavaScript" title="JavaScript">JavaScript</a> <a href="#cite_note-1">[1]</a> qui permet de structurer le rendu des composants à l'aide d'une syntaxe familière à de nombreux <a href="D%C3%A9veloppeur" title="Développeur">développeurs</a>. Il est similaire en apparence au <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a>.

Les composants <a href="React" title="React">React</a> sont généralement écrits à l'aide de JSX, bien qu'ils ne soient pas obligés de l'être, car les composants peuvent également être écrits en JavaScript pur. JSX est similaire à une autre syntaxe d'extension créée par <a href="Facebook" title="Facebook">Facebook</a> pour <a href="PHP" title="PHP">PHP</a> appelée XHP.

<div class="mw-heading mw-heading2"><h2 id="Balisage">Balisage</h2></div>

Un exemple de code JSX :

<div class="mw-highlight mw-highlight-lang-jsx mw-content-ltr mw-highlight-lines" dir="ltr"><pre>const App = () => {

return (

<div>

<p>Contenu</p>

</div>

);

}

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Éléments_imbriqués">Éléments imbriqués</h3></div>

Plusieurs éléments du même niveau doivent être enveloppés dans un seul élément React tel que l'élément <code><div></code> illustré ci-dessus, un fragment délimité par <code><Fragment></code> ou sous sa forme abrégée <code><></code>, ou renvoyés sous forme de tableau<a href="#cite_note-2">[2]</a>,<a href="#cite_note-3">[3]</a>

<div class="mw-heading mw-heading3"><h3 id="Les_attributs">Les attributs</h3></div>

JSX fournit une gamme d'attributs d'élément conçus pour refléter ceux fournis par HTML.

Des attributs personnalisés peuvent également être transmis au composant<a href="#cite_note-4">[4]</a>. Tous les attributs seront reçus par le composant en tant que propriétés.

Quelques attributs particuliers des composants React :

<ul><li><code>className</code> est une propriété définissant la classe <a href="Feuilles_de_style_en_cascade" title="Feuilles de style en cascade">CSS</a>, correspondant à l'attribut HTML <code>class</code> mais renommé en <code>className</code> car <code>class</code> est un mot réservé en Javascript.</li>

<li><code>style</code> est une propriété définissant des règles de style CSS, comme en HTML mais définie obligatoirement sous forme d'un objet au lieu d'une <a href="Cha%C3%AEne_de_caract%C3%A8res" title="Chaîne de caractères">chaîne de caractères</a>. Les noms d'attribut correspondent aux noms des propriétés CSS en remplaçant le <a href="Tiret" title="Tiret">tiret</a> par la mise en majuscule de la lettre qui suit. Exemple : <code class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr">style={{ fontWeight:'bold', fontSize:'24pt' }}</code></li>

<li><code>children</code> est une propriété contenant le tableau des éléments enfants contenus dans le composant.</li></ul>

<div class="mw-heading mw-heading3"><h3 id="Expressions_JavaScript">Expressions JavaScript</h3></div>

Les <a href="Expression_(informatique)" title="Expression (informatique)">expressions</a> JavaScript (mais pas les instructions) peuvent être utilisées dans JSX avec des accolades <code>{}</code> :

</pre></div>

L'exemple ci-dessus affichera :

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Expressions_conditionnelles">Expressions conditionnelles</h3></div>

<a href="Instruction_conditionnelle_(programmation)" title="Instruction conditionnelle (programmation)">Les instructions If–else</a> ne peuvent pas être utilisées dans JSX, mais des expressions conditionnelles peuvent être utilisées à la place. L'exemple ci-dessous affichera le résultat de l'expression <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr">{ i === 1 ? 'true' : 'false' }</code> comme la chaîne <code>'true'</code> car <code>i</code> vaut 1.

const i = 1;

return (

<div>

<h1>{ i === 1 ? 'true' : 'false' }</h1>

</div>

);

}

</pre></div>

Ce qui précède affichera :

</div>

</pre></div>

Les fonctions et JSX peuvent être utilisés au conditionnel :

const sections = [1, 2, 3];

return (

<div>

{sections.map((n,i) => (

// 'key' est utilisé par react pour pister les items de la liste et leurs changements.

// Chaque valeur 'key' doit être unique.

Section {n} {i === 0 && <span>(first)</span>}

</div>

))}

</div>

);

}

</pre></div>

Ce qui précède affichera :

<div>Section 1<span>(first)</span></div>

<div>Section 2</div>

<div>Section 3</div>

</div>

</pre></div>

Le code écrit en JSX nécessite une conversion avec un outil tel que Babel avant de pouvoir être compris par les navigateurs Web<a href="#cite_note-5">[5]</a>. Ce traitement est généralement effectué au cours d'un processus de création de logiciel avant le déploiement de l'application.

<div class="mw-heading mw-heading2"><h2 id="Notes_et_références">Notes et références</h2></div>

<li id="cite_note-1"><a href="#cite_ref-1">↑</a> « <a rel="nofollow" class="external text" href="https://facebook.github.io/jsx/"><cite style="font-style:normal;">Draft: JSX Specification</cite></a> », JSX, Facebook (consulté le <time class="nowrap" datetime="2018-04-07" data-sort-value="2018-04-07">7 avril 2018</time>)

</li>

<li id="cite_note-2"><a href="#cite_ref-2">↑</a> Clark, « <a rel="nofollow" class="external text" href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings"><cite style="font-style:normal;">React v16.0§New render return types: fragments and strings</cite></a> », React Blog, <time class="nowrap" datetime="2017-09-26" data-sort-value="2017-09-26">26 septembre 2017</time>

</li>

<li id="cite_note-3"><a href="#cite_ref-3">↑</a> « <a rel="nofollow" class="external text" href="https://reactjs.org/docs/react-component.html#render"><cite style="font-style:normal;">React.Component: render</cite></a> », React

</li>

<li id="cite_note-4"><a href="#cite_ref-4">↑</a> Clark, « <a rel="nofollow" class="external text" href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes"><cite style="font-style:normal;">React v16.0§Support for custom DOM attributes</cite></a> », React Blog, <time class="nowrap" datetime="2017-09-26" data-sort-value="2017-09-26">26 septembre 2017</time>

</li>

<li id="cite_note-5"><a href="#cite_ref-5">↑</a> <abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> Ludovico Fischer, <cite class="italique" lang="en">React for Real: Front-End Code, Untangled</cite>, Pragmatic Bookshelf, <time class="nowrap" datetime="2017-09-06" data-sort-value="2017-09-06">6 septembre 2017</time> (<a href="International_Standard_Book_Number" title="International Standard Book Number">ISBN</a> 9781680504484, <a rel="nofollow" class="external text" href="https://books.google.com/books?id=Tg9QDwAAQBAJ">lire en ligne</a>)<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=React+for+Real%3A+Front-End+Code%2C+Untangled&rft.pub=Pragmatic+Bookshelf&rft.aulast=Fischer&rft.aufirst=Ludovico&rft.date=2017-09-06&rft.isbn=9781680504484&rfr_id=info%3Asid%2Ffr.wikipedia.org%3AJSX+%28JavaScript%29">

</li>

</ol></div>

</div>

<div class="mw-heading mw-heading2"><h2 id="Liens_externes">Liens externes</h2></div>

<ul><li><cite class="ouvrage" id="site_officiel" style="font-style: normal;"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="https://facebook.github.io/jsx/">Site officiel</a></cite></li></ul>

<ul id="bandeau-portail" class="bandeau-portail"><li> Portail de l’informatique </li> </ul></div><div><div class="zim-footer">

Cet article est issu de <a class="external text" title="Dernière modification le 2025-03-20" href="https://fr.wikipedia.org/wiki/?title=JSX_(JavaScript)&oldid=224069276">Wikipédia</a>. Sauf mention contraire, le texte est disponible sous <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">Creative Commons Attribution-Share Alike 4.0</a>. Des conditions supplémentaires peuvent s’appliquer aux fichiers multimédias.

</div>

</div></div>

</div>

</main>

</div>

</body></html>